DOM

Button Example To Do App

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of objects.

DOM allows programming languages to manipulate the structure, style, and content of web pages.

It is a language-neutral interface, meaning it can be used with various programming languages like JavaScript, Python, and Java.

DOM is essential for creating dynamic and interactive web applications.

DOM Manipulation

DOM manipulation refers to the process of changing the document structure, style, and content using programming languages.

document.getElementById(id) selects an element by its unique ID.
Example:

const el = document.getElementById("myElement");

document.getElementsByClassName(classname) selects all elements with a specific class name.
Example:

const items = document.getElementsByClassName("myClass");

document.getElementsByTagName(tag) selects all elements with a specific tag name.
Example:

const divs = document.getElementsByTagName("div");

document.querySelector(selector) selects the first element matching a CSS selector.
Example:

const el = document.querySelector(".myClass");

document.querySelectorAll(selector) selects all elements matching a CSS selector.
Example:

const nodes = document.querySelectorAll("div.note");

element.innerText: Gets or sets the text content of an element.
Example:
```
document.getElementById("demo").innerText = "Hello!";
```
element.innerHTML: Gets or sets the HTML content of an element.
Example:
```
document.getElementById("demo").innerHTML = "<b>Bold!</b>";
```
element.style: Gets or sets the inline styles of an element.
Example:
```
document.getElementById("demo").style.backgroundColor = "yellow";
```